<template>
  <div :style="`padding-left: 18px; padding-right: 18px; background-image: url(${couplet.background_img});min-height:380px; margin-top:-20px; padding-top:20px;`">
    <el-date-picker
        v-model="today"
        type="date"
        style="width: 100px"
        value-format="YYYY-MM-DD"
        @change="load"
    />
    <h3 style="-webkit-text-stroke: 0.3px #fef0f0; font-weight: bolder; display: inline; margin-left: 10px">{{couplet.subject}}</h3>
    <div v-for="item in replyList" style="margin-bottom: 50px">
      <el-divider content-position="left" border-style="dashed">{{item.reply_content}}</el-divider>
      <div style="text-align: right; width: 100%; color: #fff">
        <div style="margin-top: -45px">
          <i class="iconfont icon-zan" :style="`cursor: pointer; color: ${item.had_agree===1 ? '#F56C6C' : ''}`" @click="sendAgree(item)"></i> ({{item.agree_number}})
          <span v-if="item.is_owner == 1">
            &nbsp;&nbsp;<el-icon style="cursor: pointer" @click="showModify(item)"><EditPen /></el-icon>
            &nbsp;&nbsp;<el-icon style="cursor: pointer" @click="delReply(item)"><Delete /></el-icon>
          </span>
        </div>
        <div style="margin-top: 5px">{{item.nickname}} {{labelCoupletAt}} {{item.create_time}}</div>
      </div>
    </div>
    <div v-if="couplet.subject" style="margin-bottom: 60px; text-align: center; color: #fef0f0">
      <div v-if="isMore"><span style="cursor: pointer" v-on:click="loadReply(false)">{{ htmlTextMore }}&gt;&gt;</span> </div>
      <el-divider v-else>{{ htmlTextNoMore }}</el-divider>
    </div>

    <el-row v-if="couplet.subject">
      <el-row style="position: fixed; bottom: 5px;">
        <el-input
            v-model="replyContent"
            style="width: 320px"
            :maxlength="127"
            :placeholder="labelCoupletInput"
        >
          <template #append>
            <el-button type="primary" @click="sendCouplet">
              <el-icon><Promotion /></el-icon>
              {{ btnCoupletSend }}
            </el-button>
          </template>
        </el-input>
      </el-row>
    </el-row>

    <couplet-modify ref="refCoupletModify" @confirm="saveNextCouplet" />
  </div>
</template>

<script>
import {Delete, EditPen, Promotion, Calendar} from '@element-plus/icons-vue'
import CoupletService from "@/service/CoupletService"
import DefaultMessageHandler from "@/utils/DefaultMessageHandler"
import StringUtils from "@/utils/StringUtils"
import CoupletModify from "@/components/game/CoupletModify.vue"
import AgreeRecordService from "@/service/AgreeRecordService";
import TimeUtils from "@/utils/TimeUtils";

export default {
  name: 'Couplet',
  components: {CoupletModify, Promotion, EditPen, Delete, Calendar},
  data() {
    return {
      labelCoupletToday: chrome.i18n.getMessage('coupletContentLabelToday'),
      labelCoupletInput: chrome.i18n.getMessage('coupletContentLabelInput'),
      btnCoupletSend: chrome.i18n.getMessage('coupletContentBtnSend'),
      labelCoupletAt: chrome.i18n.getMessage('coupletContentLabelAt'),
      htmlTextMore: chrome.i18n.getMessage('commonTextMore'),
      htmlTextNoMore: chrome.i18n.getMessage('commonTextNoMore'),
      couplet: {
        background_img: '',
      },
      replyContent: '',
      replyList:[],
      page: 1,
      size: 20,
      isMore: true,
      today: ''
    }
  },
  methods: {
    /**
     * 加载今日对联.
     */
    load() {
      if (!this.today) {
        return
      }
      CoupletService.getToday(this.today, (data) => {
        console.log('success: ', data)
        if (!data) {
          return
        }
        this.couplet = Object.assign({}, data)
        this.labelCoupletToday = chrome.i18n.getMessage('coupletContentLabelToday').formats(data.start_date)
        this.loadReply(true)
      }, (fail) => {
        DefaultMessageHandler.error(fail, this)
      })
    },

    /**
     * 加载回复.
     */
    loadReply(reload) {
      this.page++;
      if (reload) {
        console.log('reload: ', reload)
        this.page = 1
        this.replyList = []
        this.isMore = true
      }
      if (!this.isMore) {
        return
      }
      CoupletService.getReplyList(this.couplet.id, this.page, (data) => {
        console.log('get reply list: ', data)
        this.isMore = data.length >= this.size
        data.forEach(item => {
          this.replyList.push(item)
        })
      }, (fail)=> {
        DefaultMessageHandler.error(fail, this)
      })
    },

    /**
     * 发送对联.
     */
    sendCouplet() {
      const couplet = this.replyContent.trim()
      if (StringUtils.isBlank(couplet)) {
        return
      }
      CoupletService.replyCouplet({
        content: couplet,
        coupletId: this.couplet.id
      }, (data) => {
        this.$message.success(chrome.i18n.getMessage('coupletContentSendSuccess'))
        console.log('success: ', data)
        this.replyContent = ''
        this.loadReply(true)
      }, (fail) => {
        DefaultMessageHandler.error(fail, this)
      }
      )
    },
    /**
     * 删除回复.
     */
    delReply(row) {
      this.$confirm(chrome.i18n.getMessage('coupletDeleteConfirm'), chrome.i18n.getMessage('commonTextAlert'), {
        confirmButtonText: chrome.i18n.getMessage('commonBtnConfirm'),
        cancelButtonText: chrome.i18n.getMessage('commonBtnCancel'),
        type: 'warning'
      }).then(() => {
        CoupletService.delReply(row.couplet_id, row.id, () => {
          this.loadReply(true)
        }, (fail) => {
          DefaultMessageHandler.error(fail, this)
        })
      })
    },
    /**
     * 显示下联修改框.
     * @param row
     */
    showModify(row) {
      this.$refs.refCoupletModify.show(row)
    },
    /**
     * 保存下联.
     * @param data
     */
    saveNextCouplet(data) {
      CoupletService.modifyReply(data.couplet_id, data.id, data, () => {
        this.$message.success(chrome.i18n.getMessage('coupletModifySuccess'))
        this.loadReply(true)
      }, (fail) => {
        DefaultMessageHandler.error(fail, this)
      })
    },
    /**
     * 发送点赞.
     * @param row
     */
    sendAgree(row) {
      let fun = 'addAgree'
      if (row.had_agree===1) {
        fun = 'cancelAgree'
      }
      AgreeRecordService[fun](row.couplet_id, row.id, (data) => {
        this.$message.success(chrome.i18n.getMessage(row.had_agree === 1 ? 'agreeCancelSuccess' : 'agreeSuccess'))
        this.loadReply(true)
      }, (fail) => {
        DefaultMessageHandler.error(fail, this)
      })
    }
  },
  mounted() {
    this.today = TimeUtils.formatDate(new Date(), 'yyyy-MM-dd');
    this.load()
  }
}
</script>

<style scoped>

</style>